<template>
  <div style="height: 400px;">
    <!-- 提供地图容器 -->
    <div id="box" style="height: 400px;width: 582px;z-index: 10000;"></div>
  </div>
</template>
<script>
// 引入get请求
import { get } from '@/utils/request';
// 引入辅助函数
// import { mapMutations } from 'vuex';

export default {
  data() {
    return {
      // 存放所有设备信息数据
      deviceData: []
    }
  },
  methods: {
    // 封装加载地图函数 
    loadMap() {
      AMapLoader.load({
        key: "0a1fb7c84aa5179f6fb3a4b41222f4c9", //申请好的Web端开发者 Key，调用 load 时必填
        version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
      })
        .then((AMap) => {
          const map = new AMap.Map('box', {
            pitch: 50, //地图俯仰角度，有效范围 0 度- 83 度
            viewMode: '3D', //默认使用 2D 模式
            rotateEnable: true, //是否开启地图旋转交互 鼠标右键 + 鼠标画圈移动 或 键盘Ctrl + 鼠标左键画圈移动
            pitchEnable: true, //是否开启地图倾斜交互 鼠标右键 + 鼠标上下移动或键盘Ctrl + 鼠标左键上下移动
            zoom: 17, //地图级别
            rotation: -15, //初始地图顺时针旋转的角度
            zooms: [2, 20], //地图显示的缩放级别范围
            terrain: true,
            center: [109.83,40.63], //地图中心点
            mapStyle: "amap://styles/f718cab1ec9f69c78875216a8d9e8482"
          });
          const traffic = new AMap.TileLayer.Traffic({
            autoRefresh: true, //是否自动刷新，默认为false
            interval: 180, //刷新间隔，默认180s
          });
          map.add(traffic); //通过add方法添加图层

          AMap.plugin(['AMap.ToolBar', 'AMap.HawkEye', 'AMap.ControlBar', 'AMap.Scale', 'AMap.MapType', 'AMap.Geolocation'], function () {
            var toolbar = new AMap.ToolBar({
              position: 'LB'
            }); //缩放工具条实例化
            map.addControl(toolbar); //添加控件
            var hawkEye = new AMap.HawkEye(); // 鹰眼
            map.addControl(hawkEye);
            var controlBar = new AMap.ControlBar();
            map.addControl(controlBar);
            var scale = new AMap.Scale();
            map.addControl(scale);
            var mapType = new AMap.MapType();
            map.addControl(mapType);
            var geolocation = new AMap.Geolocation();
            map.addControl(geolocation);
          });
          this.deviceData.forEach(item => {
            // 标记点
            const marker = new AMap.Marker({
              position: item.position, // 用数组也可以
              title: item.name,
              // 携带自定义数据
              extData: item
            });
            var that = this;
            marker.on('click', function () {
              console.log(this.getExtData());
              // this-->指向标记点 marker
              that.SET_ED({
                engineer_id: this.getExtData().engineer_id,
                device_id: this.getExtData().id
              })
            })
            map.add(marker);
          })
        })
        .catch((e) => {
          console.error(e); //加载错误提示
        });
    },
    // 获取工程设备树函数
    async getEngData() {
        let res = await get('/dashboard/findEngineerDeviceTree');
        console.log(res, '工程设备树');

        // 将所有数据存放到temp中
        let temp = [];
        res.data.forEach(item => {
            if (item.children.length > 0) {
                item.children.forEach(it => {
                    temp.push(it);
                })
            }
        });
        console.log(temp);
        this.deviceData = temp;

    }
  },
  async mounted() {
    await this.getEngData();
    this.loadMap();
  }
}
</script>
<style long="less" scoped></style>